<template>
  <div class="news-card p-3">
    <!-- 有图片的新闻 -->
    <div v-if="news.image" class="flex space-x-3">
      <div class="flex-1">
        <h3 class="news-title text-base mb-2 line-clamp-2">{{ news.title }}</h3>
        <p class="news-summary mb-2">{{ news.summary }}</p>
        <div class="news-meta">
          <span>{{ news.source }}</span>
          <span class="mx-1">·</span>
          <span>{{ news.time }}</span>
        </div>
      </div>
      <div class="w-24 h-24 md:w-32 md:h-24 overflow-hidden flex-shrink-0">
        <img :src="news.image" :alt="news.title" class="w-full h-full object-cover">
      </div>
    </div>
    
    <!-- 无图片的新闻 -->
    <div v-else class="">
      <h3 class="news-title text-base mb-2">{{ news.title }}</h3>
      <div class="news-meta">
        <span>{{ news.source }}</span>
        <span class="mx-1">·</span>
        <span>{{ news.time }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewsCard',
  props: {
    news: {
      type: Object,
      required: true,
      default: () => ({
        title: '',
        summary: '',
        source: '',
        time: '',
        image: null
      })
    }
  }
}
</script>

<style scoped>
/* 新闻卡片的样式已经在base.css中定义为工具类 */
</style>